<template>
	<view>
		<view v-if="actinfo">
			<view class="addressbox">
				<view class="namebox">地点：{{ actinfo.address }}</view>
				<!-- <view class="distance">距您231米</view> -->
				<!-- <view class="detail">团结路10号14栋</view> -->
			</view>
			<!-- 1志愿者招募活动2普通活动/ -->
			<!-- <view class="paytype" @click="open()" v-if="type !== 1">
				<view>选择家庭成员</view>
				<view class="selectbox">
					<view class="namebox">
						<view v-for="(item, index) in personlist" :key="index">
							{{ item.name }}
						</view>
						<view v-if="personlist.length == 0">请选择(可多选)</view>
					</view>
					<image src="../../static/jt1.png"></image>
				</view>
			</view> -->

			<view class="actinfo">
				<view class="timebox" v-if="status == 1">
					<!-- //type 1活动，2课程 -->
					<view>活动时间：</view>
					<view class="time">
						<view>

						</view>
						<view>{{ dateFormat(actinfo.start_time) }} - {{ dateFormat(actinfo.end_time) }}</view>
						<view style="margin-top: 12rpx;"></view>
					</view>
				</view>
				<view class="timebox" v-if="status == 2">
					<view>开课时间：</view>
					<view class="time">
						<view>{{ actinfo.course_time.start_day }} 至 {{ actinfo.course_time.end_day }}</view>
						<!-- <view v-for="(item,index) in actinfo.time" :key="index">
						{{dateFormat(item.start_time)}} - {{dateFormat(item.end_time)}}
					</view> -->
						<!-- <view>6.15 上午9:00—12：00</view>
					<view style="margin-top: 12rpx;">6.15 上午9:00—12：00</view> -->
					</view>
				</view>
				<view class="timebox" v-if="status == 2">
					<view>上课时间：</view>
					<view class="time">
						<view v-for="(item, index) in actinfo ? actinfo.time_arr : []" :key="index">
							每周{{ week[item.week] }} {{ timeFormat(item.start_day) }} ~ {{ timeFormat(item.end_day) }}
						</view>
					</view>
				</view>
				<view class="courseinfo">
					<view class="rightbox" v-if="actinfo.img&&actinfo">
						<image :src="actinfo && actinfo.img ? actinfo.img.split(',')[0] : ''"></image>
					</view>
					<viwe class="leftbox">
						<view class="namebox">{{ actinfo.activity_name || actinfo.course_name }}</view>
						<view class="pricebox">￥{{ actinfo.sign_money || actinfo.price }}</view>
					</viwe>
				</view>
			</view>
			<!-- type1志愿者招募活动2普通活动 、、status //1活动，2课程  getfamily -->
			<view class="paytype" v-for="(item, index) in paylist" :key="index" @click="cancelOrder(item, index)"
				v-if="status == 2">
				<image v-if="index == actindex" src="../../static/gou.png"></image>
				<image v-else src="../../static/yuan.png"></image>
				<view class="WXpay">
					<image src="../../static/wx.png"></image>
					<view>{{ item }}<text v-if="index == 1">({{ parseInt(balance) || 0 }}积分)</text></view>
				</view>
			</view>
			<!-- <view style="margin-right: 30rpx;float: right; color: #666666;font-size: 26rpx;">您拥有{{parseInt(this.balance)}}积分</view> -->
			<!-- <view class="paytype" @click="cancelOrder()">
			<view></view>
			<view class="WXpay">
				<image src="../../static/wx.png"></image>
				<view>积分+微信支付</view>
			</view>
		</view> -->
			<view class="desc" v-if="status == 2"><text>备注:</text>教材教具如未核销学习，可以退款</view>
			<view style="height: 130rpx;"></view>
			<view class="navbut">
			<!-- 	<view class="price" v-if="parseFloat(actinfo.sign_money) == 0 || parseFloat(actinfo.price) == 0">免费
				</view>
				<view class="price" v-if="status == 2">合计: <text>￥{{ totalmoney }}</text></view> -->
				<!-- //1活动，2课程 -->
				<view class="price" v-if="status == 1">合计:
					<text>￥{{ (actinfo.sign_money || actinfo.price)}}</text>
				</view>


				<view class="but" @click="tosign()">点击报名</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<bottompopup ref="family" @handlesure="handlesure"></bottompopup>
		</uni-popup>
		<cancelOrderCom ref="cancel" @changetotal="changetotal" :proportion="value" :totalmoney="totalmoney"
			@closecanle="closecanle"></cancelOrderCom>
	</view>
</template>

<script>
	import bottompopup from '../../components/bottompopup.vue'
	import cancelOrderCom from '../../components/cancelOrder.vue';
	import jweixin from '../../utils/wxSdk.js'
	export default {
		components: {
			bottompopup,
			cancelOrderCom
		},
		data() {
			return {
				id: '',
				actinfo: null,
				totalNum: '',
				paylist: ['微信支付'],
				actindex: null,
				personlist: [],
				fd: true, //防抖
				status: '', //1活动，2课程
				type: '', //1志愿者招募活动2普通活动
				balance: '', //积分
				value: '', //积分抵扣比例 selectcommunity
				week: ['日', '一', '二', '三', '四', '五', '六', '日']
			}
		},
		onLoad(option) {
			this.id = option.id
			this.status = option.type
			this.getinfo()
			this.getmyinfo()
			// this.getfig()
		},
		onShow() {
			// this.$nextTick(() => {
			// 	this.$refs.family.getfamily()
			// })
		},
		computed: {
			// 计算选中商品数量
			totalmoney() {
				let totalmoney = 0;
				if (this.actinfo) {
					totalmoney = (this.actinfo.sign_money || this.actinfo.price) * this.personlist.length
				}
				// this.totalNum  =10
				// return totalmoney
				return parseFloat(totalmoney.toFixed(2)) - parseFloat(this.totalNum * this.value) // 保留小数点后2位
			},
		},
		methods: {
			getmyinfo() {
				this.$http({
					url: '/api/Course/user_info',
				}).then(res => {
					this.balance = res.data.integral
					console.log(parseInt(this.balance))
				})
			},
			// 积分输入框
			cancelOrder(item, index) {
				if (this.status == 1) { //status 1活动，2课程
					this.actindex == 0
					return
				}
				this.actindex = index
				console.log(this.actindex, 'this.actindex')
				if (this.actindex == 1) {
					if (parseInt(this.balance) == 0) {
						uni.showToast({
							title: '您的积分为0',
							icon: 'none'
						})
						this.actindex = 0
						return
					} else {
						this.$refs.cancel.open()
						this.totalNum = ''
					}
				}
			},
			changetotal(result) {
				this.totalNum = result
				if (this.totalmoney < 0) {
					uni.showToast({
						title: '您输入的积分过多，请重新输入',
						icon: 'none'
					})
				}
				console.log(this.totalNum, 'this.totalNum')
			},
			//取消积分输入
			closecanle() {
				this.actindex = null
			},
			//积分比例
			getfig() {
				this.$http({
					url: '/api/Wechat/sys_config',
					data: {
						key: 'score_scale'
					}
				}).then(res => {
					this.value = res.data.value / 100
				})
			},
			//课程详情
			getinfo() {
				//status 1活动，2课程
				if (this.status == 1) {
					this.$http({
						url: '/api/Activity/detail',
						data: {
							id: this.id
						}
					}).then(res => {
						this.actinfo = res.data
						this.type = this.actinfo.type //1志愿者招募活动2普通活动
						if (this.actinfo.desc) {
							this.actinfo.desc = this.$replace_Rich_text(res.data.desc)
						}
						if (this.actinfo.is_dk == 0) {
							this.paylist = ['微信支付']
							console.log('set');
						}
					})
				} else {
					this.$http({
						url: '/api/Course/detail',
						data: {
							id: this.id
						}
					}).then(res => {
						this.actinfo = res.data
						if (this.actinfo.is_dk == 0) {
							this.paylist = ['微信支付']
							console.log('set');
						}
						if (this.actinfo.desc) {
							this.actinfo.desc = this.$replace_Rich_text(res.data.desc)
						}
						this.type = 2 //2收费1免费
					})
				}

			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，status 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			handlesure(result) {
				this.$refs.popup.close()
				this.personlist = JSON.parse(JSON.stringify(result))
				console.log(this.personlist)
			},
			async tosign() {
				// type 1志愿者招募活动2普通活动/
				// if (this.actindex == null && this.status == 2) {
				// 	uni.showToast({
				// 		title: '请选择支付方式',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.personlist.length == 0 && this.status == 2) {
				// 	uni.showToast({
				// 		title: '请选择参与的家庭成员',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				if (this.fd) {
					this.fd = false
					try {
						if (this.status == 1) { //status 1活动，2课程、、/api/api/activityApply
							// if (this.type == 2 && this.personlist.length == 0) { //type 1志愿者招募活动2普通活动
							// 	uni.showToast({
							// 		title: '请选择参与的家庭成员',
							// 		icon: 'none'
							// 	})
							// 	return
							// }
							await this.$http({
								url: '/api/api/activityApply',
								data: {
									activity_id: this.actinfo.id,
									// pay_type:this.actindex+1,//1微信支付2抵扣支付
									// score:this.totalNum,
									// family_uid: this.type == 1 ? '' : this.personlist.map(item => item.id),
									// total_money:(this.actinfo.sign_money||this.actinfo.price)*this.personlist.length,
									// pay_money:this.totalmoney
								}
							}).then(res => {
								this.webwechatPay(res.data)
								//type 1志愿者招募活动2普通活动
								// if (this.type == 1 || this.actinfo.sign_money == 0 || this.actinfo.price ==
								// 	0) {
								// 	uni.showToast({
								// 		title: res.msg,
								// 		icon: 'none'
								// 	})
								// 	setTimeout(() => {
								// 		uni.navigateTo({
								// 			url: '/pagemy/actorderlist/actorderlist?id=' + ''
								// 		})
								// 	}, 500)
								// } else {
								// 	this.payact(res.data)
								// }

							})
						} else {

							await this.$http({
								url: '/api/course/create_order',
								data: {
									id: this.actinfo.id,
									pay_type: this.actindex + 1, //1微信支付2抵扣支付
									score: this.totalNum,
									family: this.personlist.map(item => item.id),
									total_money: (this.actinfo.sign_money || this.actinfo.price) * this
										.personlist.length,
									pay_money: this.totalmoney,
								}
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.pay(res.data)
							})
						}
					} catch (err) {

					} finally {
						this.fd = true
					}
				}
			},
			// pay(id){
			// 	this.$http({
			// 		url:'/api/course/pay_course',
			// 		data:{
			// 			order_id:id
			// 		}
			// 	}).then(res=>{
			// 		uni.navigateTo({
			// 			url:'/pages/myCourse/myCourse'
			// 		})
			// 		uni.showToast({
			// 			title:res.msg,
			// 			icon:'none'
			// 		})
			// 	})
			// },

			//h5支付
			async webwechatPay(orderid) {
				// if(!this.fding){
				// 	return
				// }
				const {
					data
				} = await this.$http({
					url: '/api/Wxpay/pay_activity', //api/wxpay/storeOrderPay
					data: {
						order_id:orderid
					},
				})
				let that = this
				console.log(data, 'respon1', orderid)
				
				// that.fding = false

				this.$wxSdk.wxchooseWXPay(data, () => {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					setTimeout(() => {
					
						uni.navigateTo({
							url: '/pagemy/actorderlist/actorderlist?id=' + ''
						})
					}, 1000)

				}, () => {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				})

			},

			async pay(orderid) {
				const {
					data
				} = await this.$http({
					url: '/api/course/pay_course',
					data: {
						order_id: orderid
					},
				})

				if (this.actindex == 1) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/myCourse/myCourse'
						})

					}, 1000)
				} else {
					let that = this

					uni.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: "MD5",
						paySign: data.paySign,
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/myCourse/myCourse'
								})

							}, 1000)
						},
						fail: function(res) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						},
					})
				}

			},
			async payact(orderid) {
				const {
					data
				} = await this.$http({
					url: '/api/api/pay_activity',
					data: {
						order_id: orderid
					},
				})
				let that = this

				uni.requestPayment({
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: "MD5",
					paySign: data.paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(() => {

							uni.navigateTo({
								url: '/pagemy/actorderlist/actorderlist?id=' + ''
							})
						}, 1000)
					},
					fail: function(res) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					},
				})
			},
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			timeFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
		}
	}
</script>

<style lang="scss">
	.addressbox {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		margin: 24rpx 0;

		.namebox {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
		}

		.distance {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FF8A9B;
			margin: 20rpx 0;
		}

		.detail {
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
		}
	}

	.actinfo {
		width: 690rpx;
		padding: 0 30rpx 30rpx 30rpx;
		// height: 406rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 24rpx 0;

		.timebox {
			min-height: 120rpx;
			// padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx dashed #F2F2F2;

			.time {
				width: 530rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;

				>view {
					// height: 56rpx;
					background: #FFF9FA;
					border-radius: 8rpx;
					width: fit-content;
					padding: 0 14rpx;
					// line-height: 56rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.courseinfo {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.rightbox {
				width: 190rpx;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.leftbox {
				width: 500rpx;

				.namebox {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #222222;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.pricebox {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					margin-top: 15rpx;

					>text {
						margin-left: 26rpx;
					}
				}
			}
		}
	}

	.paytype {
		width: 690rpx;
		padding: 0 30rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #222222;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		// margin-top: 24rpx;
		.WXpay {
			display: flex;
			align-items: center;

			image {
				width: 46rpx;
				height: 46rpx;
				margin-right: 20rpx;
			}
		}

		.selectbox {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			.namebox {
				width: 420rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				>view {
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-right: 10rpx;
				}
			}

			image {
				width: 11rpx;
				height: 19rpx;
				margin-left: 24rpx;
			}
		}
	}

	.desc {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		margin-top: 40rpx;

		>text {
			color: #F6AF20;
		}
	}

	.navbut {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;

		.price {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;

			>text {
				color: #FF6178;
			}
		}

		.but {
			width: 228rpx;
			height: 84rpx;
			background: #FF8A9B;
			border-radius: 83rpx;
			margin-right: 30rpx;
			color: #FFF;
			line-height: 84rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>